<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>更改预约时间</title>
    <link href="../../css/common.css" rel="stylesheet"/>
    <link href="../../css/mui.min.css" rel="stylesheet"/>
    <link href="../../css/mui.picker.min.css" rel="stylesheet"/>
    <link href="../../css/mui.poppicker.css" rel="stylesheet"/>
    <link href="../../css/order/orderDetail.css" rel="stylesheet"/>


    <script src="../../js/vue.min.js"></script>
    <script src="../../js/mui.min.js"></script>
    <script src="../../js/fastclick.js"></script>
    <script src="../../js/mui.picker.min.js"></script>
    <script src="../../js/mui.poppicker.js"></script>
    <script src="../../js/vue-common.js"></script>
    <script src="../../js/mui-componets.js"></script>
    <script src="../../js/api.js"></script>

    <script src="../../js/common.js"></script>
    <style>
       .card-box.li.time{
           margin: 0;
           border-bottom: 1px solid #F3F3F3;
       }
    </style>
</head>
<body>
<div id="app">
    <div class="header-nav">
        <span>更改预约时间</span>
        <div class="icon"><img src="../../img/common/btn_back.png" alt=""></div>
    </div>

    <div class="container">

        <div class="card-box li time">

            <div class="xlb-li">
                <div class="left">预约时间</div>
                <div id='yuyueTime' class="right">
                    <span id="yuyueTime_result" data-options='{}' style="text-align: center">请选择</span>
                    <img src="../../img/common/btn_more.png" alt=""></span>
                </div>
            </div>
        </div>

        <div class="card-box">
            <div class="order-title">更改原因</div>
            <div>
                <textarea  v-model="form.modifyRemark" class="text-area"  placeholder="请填写更改预约时间的原因"></textarea>
            </div>
        </div>


        <div @click="doUpdateTime" class="xl-btn normal no-shadow">确认修改</div>
    </div>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            form: {
                orderId: '',
                dateDate: '',
                modifyRemark: ''
            }

        },
        methods: {
            doUpdateTime: function (orderId) {

                if (!this.form.dateDate) {
                    return mui.toast("请选择预约时间");
                }
                if (!this.form.modifyRemark) {
                    return mui.toast("更改原因");
                }
                Resource.post(ORDER_UPDATE_BOOKED_TIME_API, this.form, function (res) {
                    mui.toast("操作成功！");
                    // 获取窗口对象
                    ws = plus.webview.currentWebview();
                    wo = ws.opener();
                    console.log(vm.form.dateDate);
                    wo.evalJS("dealUpdateTime(" +vm.form.dateDate+");");
                    mui.back();

                })
            }
        }
    });

</script>
<script>
    mui.plusReady(function () {
        var self = plus.webview.currentWebview();
        var orderId =  self.orderId;
        if(orderId =='' || orderId == 'undefined'){
            return;
        }
        console.log('listen ----------orderId =' + orderId);
        vm.form.orderId = orderId;

    });
    selectTime('yuyueTime', function (data) {
        vm.form.dateDate = data;
    }, '请选择: ');//预约时间
</script>
</body>
</html>